## what
  - add type for User Submission
    - UserSubmission
      - name: name of the user
      - uname: username of the user
      - subs: (of type UserSub)
        - sid: submission id
        - pid: problem id
        - pnum: problem number
        - pTitle: problem title
        - ver: verdict id
        - verdict: verdict details (of type ProblemVerdictType)
        - run: runtime
        - sbt: submission time
        - lan: language
        - rank: submission rank

  ## how

  ## why
  - used for setting up structure of the data returned from api

  ## where
  - ./src/types/index.ts

  ## usage

…username]/submissions`

  ## what
  - add schema for endpoint `/api/users/[username]/submissions`

  ## how

  ## why
  - this will be used to validate the data on client side and server
    side

  ## where
  - ./src/schema/index.ts

  ## usage

…ssions`

  ## what
  - add endpoint `/api/users/[username]/submissions`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch all problems from `/api/problems`
    - used as a cache for `pnum`, `pTitle`
  - fetch user submissions
  - sort the submissions by submission time in descending order
  - take only the first 500 elements in the array
  - convert submission array into `UserSub` object
    - add properties
      - pnum
      - pTitle
      - verdict

  ## why
  - this will be used for fetching user submissions

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage

  ## what
  - add react-query hook to fetch user submissions

  ## how
  - fetch from endpoint `/api/users/[username]/submissions`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

…table

  ## what
  - add columns structure for user submissions table
    - submission ID
    - problem number
    - problem title
    - verdict
    - language
    - runtime
    - rank
    - submission time

  ## how
  - using @tanstack/react-table to generate a table

  ## why
  - this will be used to display data as a table using DataTable

  ## where
  - ./src/app/users/[username]/components/data-table/submissionColumns.tsx

  ## usage

  ## what
  - display user submissions on `/users/[username]` page

  ## how
  - using DataTable to display a table

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add property `verdictShort` in `ProblemVerdictMap` object

  ## how

  ## why
  - this will be used in api endpoint `/api/users/[username]/submissions/verdict`
    - the endpoint will count the verdicts by verdict ID
      - the verdicts are in number form
      - the ProblemVerdictMap needs a way to reference the object in
        reverse when converting verdictID into verdictShort
      - with this the endpoint can access the object of the
        corresponding verdictObject using verdictShort

  ## where
  - ./src/types/index.ts

  ## usage

  ## what
  - add type for User submission verdict
    - UserSubmissionBarChartType
      - name: name of the bar in bar chart
      - verdict: value of submission verdict count
      - tooltipTitle: string to display in bar tooltip
      - fill: color to display the bar chart

  ## how

  ## why
  - used for generating data for Rechart bar chart
    - for displaying user submissions by verdict

  ## where
  - ./src/types/index.ts

  ## usage

…e]/submissions/verdict`

  ## what
  - add endpoint `/api/users/[username]/submissions/verdict`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions from endpoint `/api/users/[username]/submissions`
  - count submissions by verdict type
  - process the data to work with rechart bar chart

  ## why
  - used for displaying submission by verdict in a Rechart bar chart

  ## where
  - ./src/app/api/users/[username]/submissions/verdict/route.ts

  ## usage

  ## what
  - add react-query hook to fetch user submissions by verdict

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/verdict`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - display user submissions by verdict with bar chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionVerdict`
  - display the data using Rechart bar chart

  ## why
  - to display submissions by verdict

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add type for raw User submissions
    - UserSubmission
      - name: name of the user
      - uname: username of the user
      - subs: submissions of the user (type of UserSub)
    - UserSub: a tuple of 7 elements
      - Submission ID
      - Problem ID
      - Verdict ID
      - Runtime
      - Submission time (unix timestamp)
      - Language ID
      - Submission Rank

  ## how

  ## why
  - this is to add types to the raw data returned from uhunt api
  - better to have a seperate Raw data type before transforming them
    into usable data type

  ## where
  - ./src/types/raw.ts

  ## usage

…int `/api/users/[username]/submissions`

  ## what
  - use `RawUserSubmission` type in endpoint `/api/users/[username]/submissions`

  ## how

  ## why
  - this is to give a more accurate understanding of the data returned
    from uhunt api

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage

  ## what
  - move type `SubmissionLangType` from `src/utils/dataProcessing.ts` to `src/types/index.ts`

  ## how

  ## why
  - better to move it in one place

  ## where
  - ./src/types/index.ts
  - ./src/utils/dataProcessing.ts

  ## usage

  ## what
  - move type `VerdictBarChartType` to `src/types/index.ts`

  ## how

  ## why
  - better to move it in one place

  ## where
  - ./src/components/charts/ProblemVerdictChart.tsx
  - ./src/types/index.ts
  - ./src/utils/dataProcessing.ts

  ## usage

…chart radar chart

  ## what
  - process the data for Rechart radar chart

  ## how

  ## why
  - better to process the data server side

  ## where
  - ./src/app/api/submissions/language/[problemNum]/route.tsx

  ## usage

  ## what
  - add type returned for hook `useFetchSubmissionLang`

  ## how

  ## why
  - better to have a datatype attached when fetching the data

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - change prop type to `SubmissionLangType`

  ## how

  ## why
  - the api endpoint `/api/submissions/language/[problemNum]` now
    processes the data for Rechart radar chart

  ## where
  - ./src/components/charts/SubmissionLanguageRadarChart.tsx

  ## usage

…ssionLanguageRadarChart`

  ## what
  - update datatype passed to component `SubmissionLanguageRadarChart`

  ## how
  - cast type when passing data to the component

  ## why

  ## where
  - ./src/app/problems/[problemNum]/page.tsx

  ## usage

…issions/language`

  ## what
  - add endpoint `/api/users/[username]/submissions/language`

  ## how
  - check if username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count submissions by language
  - process the data to work with rechart Radar chart

  ## why
  - used for displaying submissions by language in a Rechart Radar chart

  ## where
  - ./src/app/api/users/[username]/submissions/language/route.ts

  ## usage

  ## what
  - add react-query hook to fetch user submissions by language

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/language`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - display user submissions by language with radar chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionLanguage`
  - display the data using Rechart radar chart

  ## why
  - to display submissions by language

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add type for raw Problem
    - problem ID
    - problem number
    - problem title
    - Number of Distinct Accepted User (DACU)
    - Best Runtime of an Accepted Submission
    - Best Memory used of an Accepted Submission
    - Number of No Verdict Given (can be ignored)
    - Number of Submission Error
    - Number of Can't be Judged
    - Number of In Queue
    - Number of Compilation Error
    - Number of Restricted Function
    - Number of Runtime Error
    - Number of Output Limit Exceeded
    - Number of Time Limit Exceeded
    - Number of Memory Limit Exceeded
    - Number of Wrong Answer
    - Number of Presentation Error
    - Number of Accepted
    - Problem Run-Time Limit (milliseconds)
    - Problem Status (0 = unavailable, 1 = normal, 2 = special judge)

  ## how

  ## why
  - this will be used in api endpoint `/api/problems` when fetching from
    uhunt api
  - this would add some structure when fetching from uhunt api

  ## where
  - ./src/types/raw.ts

  ## usage

…stead of nextjs api endpoint `/api/problems`

  ## what
  - fetch all problems from uhunt api instead of nextjs api endpoint `/api/problems`

  ## how

  ## why
  - fetching all problems from `http://localhost:3000/api/problems`
    fails when published on vercel
  - so the alternative is to fetch from uhunt api
    - add type `RawProblem` to the data

  ## where
  - ./src/app/api/users/[username]/submissions/route.ts

  ## usage

  ## what
  - add type for submissions overtime
    - SubmissionsOvertimeLineChartType
      - name: name of the entry
      - time: submission year. Denoted as YYYY
      - submissions: submission count for the year
      - fill: color used for the chart

  ## how

  ## why
  - used for generating code Rechart area/line chart
  - will be used for api endpoint `/api/users/[username]/submissions/overtime`

  ## where
  - ./src/types/index.ts

  ## usage

…s proptype

  ## what
  - use `SubmissionsOvertimeLineChartType` as proptype
    - replace proptype `SubmissionOvertimeType` with `SubmissionsOvertimeLineChartType` type

  ## how

  ## why
  - to use a type coming from one source
  - having the prop type coming from multiple sources is confusing

  ## where
  - ./src/components/charts/SubmissionsOvertimeChart.tsx

  ## usage

…pi endpoint response

  ## what
  - use `SubmissionsOvertimeLineChartType` as api endpoint response
    - replace type `getResponseType` with `SubmissionsOvertimeLineChartType`

  ## how

  ## why
  - to use a type coming from one source
  - having the type coming from multiple sources is confusing

  ## where
  - ./src/app/api/submissions/overtime/[problemNum]/route.ts

  ## usage

…issions/overtime`

  ## what
  - add endpoint `/api/users/[username]/submissions/overtime`

  ## how
  - check if username if valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count submissions by year
  - add missing years
    - add missing year as key, and value as 0 (because there was no submissions that year)
  - calculate cumulative sum
  - construct data structure for Rechart area/lint chart

  ## why
  - used for displaying submissions overtime

  ## where
  - ./src/app/api/users/[username]/submissions/overtime/route.ts

  ## usage

  ## what
  - add react-query hook to fetch user submissions overtime

  ## how
  - fetch from endpoint `/api/users/[username]/submissions/overtime`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - display user submissions overtime with area chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionOvertime`
  - display the data using Rechart area chart

  ## why
  - to display submissions overtime

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add proper color hexcode for `ProblemVerdictMap` object

  ## how

  ## why
  - some of the `bgHex` were missing `#` to denote hexcode

  ## where
  - ./src/types/index.ts

  ## usage

…sions/attempted`

  ## what
  - add endpoint `/api/users/[username]/submissions/attempted`

  ## how
  - check if the username is valid (using zod schema)
  - if username doesn't exist, return 404
  - fetch user submissions
  - count unique solved submissions using a set
    - record problem ID
  - construct data structure for Rechart donut chart
    - solved submissions (get the size of the set)
    - attempted submissions (number of user submissions)

  ## why

  ## where
  - ./src/app/api/users/[username]/submissions/attempted/route.ts

  ## usage

  ## what
  - add react-query hook to fetch user submission attempted

  ## how
  - fetch from api endpoint `/api/users/[username]/submissions/attempted`

  ## why

  ## where
  - ./src/hooks/index.ts

  ## usage

  ## what
  - add `SolvedVsAttemptedDonutChart` component

  ## how
  - take a prop
    - data of type `SubmissionSolvedVsAttempted` array
  - use Rechart pie chart
  - use custom tooltip from `./src/components/charts/Tooltip`
  - use styles from Tremor charts
    - https://github.com/tremorlabs/tremor/blob/main/src/components/chart-elements/DonutChart/DonutChart.tsx

  ## why
  - this will display user solved problems vs user submissions using
    `donut` chart

  ## where
  - ./src/components/charts/SolvedVsAttemptedDonutChart.tsx

  ## usage

…t chart

  ## what
  - display problem solved VS user submissions with donut chart

  ## how
  - fetch the data using react-query hook `useFetchUserSubmissionAttempted`
  - display the data using Rechart donut chart

  ## why
  - to display user solved problems VS user submissions

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add style to display tooltip color

  ## how
  - use `style` property
    - use `backgroundColor`

  ## why
  - sometimes the background color is not applied when using tailwindcss
  - this method will make sure to apply the background color

  ## where
  - ./src/components/charts/Tooltip.tsx

  ## usage

  ## what
  - add `Loading` component for `/users/[username]` page

  ## how

  ## why
  - this will be displayed when fetching data on the `/users/[username]`
    page

  ## where
  - ./src/app/users/[username]/loading.tsx

  ## usage

…/users/[username]` page

  ## what
  - display `Loading` component when fetching data on `/users/[username]` page

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - replace `isLoading` with `isFetching` from react-query hooks

  ## how

  ## why
  - scenario
    - currently in user page
    - navigate to `/` page
    - click on a user link
    - loading component is not being displayed
  - `isFetching` will be true when fetching data even if the page has
    been mounted

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - format code

  ## how

  ## why

  ## where
  - ./src/app/users/[username]/page.tsx

  ## usage

  ## what
  - add screenshot of `/users/[username]` page
    - loading
    - data loaded

  ## how

  ## why

  ## where
  - ./docs/images/page-users-username-loading.png
  - ./docs/images/page-users-username.png

  ## usage

  ## what
  - display screenshots for `/users/[username]` page

  ## how

  ## why

  ## where
  - ./README.md

  ## usage